<template>
  <!-- <template> -->
  <a-config-provider prefix-cls="ss">
    <a-modal
      width="1050px"
      v-model:visible="visible"
      :title="initData.title"
      @cancel="handleCancel"
    >
      <div class="container">
        <div class="content-page">
          <!-- 列表 -->
          <a-table
            :columns="columns"
            :data-source="data"
            bordered
            :pagination="false"
          >
            <!-- 列表头部 -->
            <template #headerCell="{ column }">
              <!-- 台词文案 -->
              <template v-if="column.key === 'line_audio'">
                <div class="th_line_audio">
                  <span>{{ column.title }}</span>
                  <span>
                    <a-tooltip>
                      <template #title
                        >点击总的「台词配音」，将按照配置的音色内容对脚本中所有台词文案进行配音覆盖</template
                      >
                      <QuestionCircleOutlined style="margin-right: 4px" />
                    </a-tooltip>
                    <a-button type="default" size="small" disabled
                      >台词配音</a-button
                    >
                  </span>
                </div>
              </template>
            </template>
            <!-- 列表主体部分 -->
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'id'">
                {{ index }}
              </template>
              <!-- {{ record }} -->
              <!-- 分镜名称 -->
              <template v-if="column.key === 'name'">
                <div class="td_storyboard_name">
                  <a-textarea
                    style="height: 100%; width: 100%"
                    placeholder="请输入分镜名称"
                    :bordered="false"
                    :maxlength="20"
                    class="no-resize textarea"
                    disabled
                    v-model:value="initData.script_scenes[index].name"
                  />
                  <div class="font-count">
                    {{ initData.script_scenes[index].name.trim().length }}/20
                  </div>
                </div>
              </template>
              <!-- 分镜描述 -->
              <template v-if="column.key === 'remark'">
                <div class="td_storyboard_desc">
                  <!-- 左侧分镜描述文本 -->
                  <div class="td_storyboard_descLf">
                    <a-textarea
                      style="height: 100%; width: 100%"
                      placeholder="详细描述分镜"
                      :bordered="false"
                      class="no-resize textarea"
                      :maxlength="100"
                      v-model:value="initData.script_scenes[index].remark"
                      disabled
                    />
                    <div class="font-count">
                      {{
                        initData.script_scenes[index].remark.trim().length
                      }}/100
                    </div>
                  </div>
                  <!-- 右侧分镜描述文件上传 -->
                  <div class="file-upload-img">
                    <!-- 有图片情况下 -->
                    <div
                      class="file-img"
                      v-if="
                        initData.script_scenes[index].remark_example_url
                          .length > 0
                      "
                    >
                      <a-popover
                        placement="topLeft"
                        :overlayStyle="{ zIndex: '1000' }"
                      >
                        <template #content>
                          <!-- 溢出分镜文本图片显示组件 -->
                          <TemplateVideoList
                            :urlList="
                              initData.script_scenes[index].remark_example_url
                            "
                            :parentIndex="index"
                            :updateType="'remark_example_url'"
                            :allowClick="false"
                            @deleteParentUrl="deleteParentUrl"
                            @updateParentsUrl="updateParentsUrl"
                          />
                        </template>
                        <!-- 分镜描述展示图片 -->
                        <img
                          v-if="
                            initData.script_scenes[index].remark_example_url[0]
                              ?.scene_type == 'image'
                          "
                          style="height: 180px; width: 140px; object-fit: cover"
                          :src="
                            initData.script_scenes[index].remark_example_url[0]
                              ?.material_url
                          "
                        />
                        <!-- 分镜描述视频展示 -->
                        <video
                          v-else
                          style="height: 180px; width: 140px"
                          :src="
                            initData.script_scenes[index].remark_example_url[0]
                              ?.material_url
                          "
                        ></video>
                        <span class="img-count">{{
                          initData.script_scenes[index].remark_example_url
                            ?.length || ""
                        }}</span>
                      </a-popover>
                    </div>
                    <!-- 图片上传 -->
                    <div class="upload-img" v-else>
                      <div style="font-size: 24px; font-weight: 600">+</div>
                      <div>添加素材</div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 台词文案 -->
              <template v-if="column.key === 'line_audio'">
                <div class="td_line_audio">
                  <div class="line_dubbing-textarea">
                    <a-textarea
                      style="width: 100%; height: 140px"
                      placeholder="输入脚本台词，回车换行"
                      class="no-resize textarea"
                      :bordered="false"
                      disabled
                      v-model:value="
                        initData.script_scenes[index].line_audio[0]
                          .elements[0][0].text
                      "
                    />
                  </div>
                  <!-- 无音频播放地址 -->

                  <div
                    class="line_dubbing"
                    v-if="
                      !initData.script_scenes[index]?.line_audio[0].audio_url
                    "
                  >
                    <span class="line_dubbing_btn">
                      <cu-icon
                        type="icon-quanjuzimupeiyin"
                        style="
                          color: #7794ca;
                          height: 100%;
                          margin-right: 3px;
                          font-size: 20px;
                        "
                      ></cu-icon
                      >台词配音
                    </span>
                  </div>

                  <!-- 有音频播放地址 -->
                  <div class="hasurl_line_dubbing" v-else>
                    <div class="line_dubbing_btn">
                      <span>
                        <cu-icon
                          class="icon"
                          type="icon-shengkongqiehuan"
                          style="margin-right: 5px; color: #87a6d4"
                        />
                        台词配音</span
                      >

                      <!-- 音频时长 -->
                      <span style="margin: 0 5px">{{
                        record.line_audio[0].duration_text
                      }}</span>
                      <!-- 暂停按钮 -->
                      <span
                        class="play"
                        @click.stop="pauseAudio(record)"
                        v-if="isItemPlaying(record)"
                      >
                        <StopOutlined
                          style="color: #87a6d4; margin-right: 3px"
                        />暂停
                      </span>

                      <!-- 播放按钮 -->
                      <span class="pause" v-else @click.stop="playAudio(record)"
                        ><caret-right-outlined
                          style="color: #87a6d4"
                        />试听</span
                      >
                    </div>
                    <!-- 音频播放器 -->
                    <audio
                      :id="record.id"
                      @ended="endAUdioPlay(record)"
                      ref="audioRef"
                      :src="record?.line_audio[0].audio_url"
                      style="display: none"
                    ></audio>
                  </div>
                </div>
              </template>
              <!-- 已拍摄片段 -->
              <template v-if="column.key === 'example_url'">
                <!-- {{ record }} -->
                <div class="file-upload-img">
                  <!-- 有图片情况下 -->
                  <div
                    class="file-img"
                    v-if="initData.script_scenes[index].example_url?.length > 0"
                  >
                    <a-popover
                      placement="topLeft"
                      :overlayStyle="{ zIndex: '1000' }"
                    >
                      <template #content>
                        <TemplateVideoList
                          :urlList="initData.script_scenes[index].example_url"
                          :updateType="'example_url'"
                          :parentIndex="index"
                          :allowClick="false"
                          @deleteParentUrl="deleteParentUrl"
                          @updateParentsUrl="updateParentsUrl"
                        />
                      </template>
                      <!-- 展示图片 -->
                      <img
                        v-if="data[index].example_url[0]?.scene_type == 'image'"
                        style="height: 180px; width: 140px; object-fit: cover"
                        :src="
                          initData.script_scenes[index].example_url[0]
                            ?.material_url
                        "
                      />
                      <!-- 视频展示 -->
                      <video
                        v-else
                        style="height: 180px; width: 140px"
                        :src="
                          initData.script_scenes[index].example_url[0]
                            ?.material_url
                        "
                      ></video>
                      <span class="img-count">{{
                        initData.script_scenes[index].example_url.length || ""
                      }}</span>
                    </a-popover>
                  </div>
                  <!-- 图片上传 -->

                  <div class="upload-img" v-else>
                    <div style="font-size: 24px; font-weight: 600">+</div>
                    <div>添加素材</div>
                  </div>
                </div>
              </template>
            </template>
          </a-table>
          <!-- 添加一行 -->
          <div class="addLine">
            <span
              >+添加一行 <i class="triangle_left"></i>
              <i class="triangle_right"></i
            ></span>
          </div>
        </div>
      </div>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="imprrtMixCut"
          >导入</a-button
        >
      </template>
    </a-modal>
    <!-- 素材库组件 -->
    <ChooseMaterial
      :isClip="false"
      material_type="video_image"
      :multiple="true"
      :visible="materiallibraryShow"
      @close="closeChooseMaterial($event, 'material_type')"
    />
  </a-config-provider>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  computed,
  nextTick,
  createVNode,
  onMounted,
  watch,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import request from "@/common/utils/request";
import {
  QuestionCircleOutlined,
  PlusOutlined,
  PicLeftOutlined,
  CaretRightOutlined,
  FullscreenOutlined,
  DeleteOutlined,
  StopOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
// 文件左侧展示组件
import TemplateVideoList from "../../CreationCenter/components/templateVideoList.vue";
import { message, Modal } from "ant-design-vue";
// 拖拽组件
import Draggable from "vuedraggable";
// 文件选择弹窗组件
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
import {
  createScriptData,
  baseScriptScenesItem,
  base_VideoMashup,
  baseTts_config,
  baseSubtitle,
} from "@/views/shotstack/MuseMixedCut/utools/index.js";
// 随机生成id方法函数
import { nanoid } from "nanoid";
export default defineComponent({
  name: "ScriptSquare",
  components: {
    QuestionCircleOutlined,
    PicLeftOutlined,
    FullscreenOutlined,
    DeleteOutlined,
    CaretRightOutlined,
    StopOutlined,
    TemplateVideoList,
    EditOutlined,
    Draggable,
    PlusOutlined,
    ChooseMaterial,
    ExclamationCircleOutlined,
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      scriptLineDetailist: null, //列表接口数据
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: 40,
        },
        {
          title: "分镜名称",
          dataIndex: "name",
          key: "name",
          align: "center",
          width: 100,
        },
        {
          title: "分镜描述",
          dataIndex: "remark",
          key: "remark",
          align: "center",
          width: 200,
        },
        {
          title: "台词文案",
          dataIndex: "line_audio",
          key: "line_audio",
          align: "center",
          width: 240,
        },
        {
          title: "已拍摄片段",
          dataIndex: "example_url",
          key: "example_url",
          align: "center",
          width: 180,
        },
      ],
      data: [], //列表数据
      visible: false, //控制弹窗显示隐藏
      materiallibraryShow: false, //控制老系统素材库弹窗显示隐藏
      parentIndex: null, //当前点击的列表父级索引
      uploadType: "", //选则图片上传的类型(remark:分镜描述，example_url：已拍摄片段)
      initData: {}, //总数据
      itemSpinning: [], // 每一项的加载状态
      itemPlaying: [],
      detailId: "", //详情id
      currentlyPlayingItem: null,
      createType: "", //创建类型
      viewType: "", //查看类型
    });
    const showModal = (info, createType, viewType) => {
      console.log(info, createType, viewType);
      state.createType = createType; //判断是从我的脚本还是脚本广场打开的抽屉
      state.detailId = info.id; //详情id
      state.viewType = viewType; //判断是从我的脚本还是脚本广场打开的详情弹窗
      getScriptLineDetail(info.id); //接口请求数据
      state.visible = true; //打开页面
    };
    // 初始化列表数据
    const initializeData = () => {
      state.data = state.initData.script_scenes?.map((item, index) => {
        const idKey = nanoid();
        return {
          id: idKey, // 序号
          name: item.name, // 分镜名称
          remark: item.remark, // 分镜描述
          line_audio: item.line_audio, // 台词文案
          example_url: item.example_url, // 已拍摄片段
        };
      });
    };
    /**
     * @description 获取脚本详情列表
     * @param {string} scriptLineId 脚本id
     * @returns {Promise}
     */
    const getScriptLineDetail = (id) => {
      console.log(state.viewType);
      let httpsUrl = "";
      // 脚本广场跳转
      if (state.viewType == "templateScript") {
        httpsUrl = "/user/shotstack/script-line/org/detail";
      } else {
        // 我的脚本跳转
        httpsUrl = "/user/shotstack/script-line/detail";
      }
      request
        .get("/work_ai", httpsUrl, {
          scriptLineId: id,
        })
        .then((res) => {
          state.initData = res.detail;
          initializeData();
        });
    };

    // 点击添加素材
    const importImg = (index, type) => {
      state.materiallibraryShow = true; //打开图片上传弹窗
      state.parentIndex = index; //父组件索引
      state.uploadType = type; //点击添加素材类型
    };
    // 素材选中回调
    const closeChooseMaterial = (info, key) => {
      state.materiallibraryShow = false; //关闭弹窗
      let filterList = info?.map((item, index) => {
        return {
          // 文件路径
          material_url: item.material_url,
          // 文件名称
          material_name: item.material_name,
          // 素材类型
          scene_type: item.material_type,
          // id
          id: item.id,
          // 文件时长
          material_duration:
            item.material_type == "video" ? item.material_duration : 3000,
          end_time:
            item.material_type == "video" ? item.material_duration : 3000,
          // 文件后缀
          material_extension: item.material_extension,
          // 文件大小
          material_size: item.material_size,
        };
      });
      if (!filterList?.length) return;
      filterList.forEach((item) => {
        // 分镜描述图片
        if (state.uploadType == "remark") {
          // 去重
          const indexId = state.initData.script_scenes[
            state.parentIndex
          ]?.remark_example_url.findIndex(
            (existingItem) => existingItem.id == item.id
          );
          if (indexId == -1) {
            state.initData.script_scenes[
              state.parentIndex
            ].remark_example_url.push({
              ...item,
            });
          }
          console.log(
            state.initData.script_scenes[state.parentIndex],
            "分镜头描述图片上传"
          );
        } else if (state.uploadType == "example_url") {
          // 已拍摄片段图片
          // 去重
          const indexId = state.initData.script_scenes[
            state.parentIndex
          ]?.example_url?.findIndex(
            (existingItem) => existingItem.id == item.id
          );
          if (indexId == -1) {
            state.initData.script_scenes[state.parentIndex].example_url.push({
              ...item,
            });
          }
          console.log(state.data[state.parentIndex], "已拍摄片段图片上传");
        }
      });
    };
    //  气泡子组件删除图片回调
    const deleteParentUrl = (info) => {
      if (info.updateType == "remark_example_url") {
        const indexKey = state.initData.script_scenes[
          info.parentIndex
        ].remark_example_url?.findIndex(
          (extendsItem) => extendsItem.id == info.id
        );
        state.initData.script_scenes[
          info.parentIndex
        ].remark_example_url.splice(indexKey, 1);
      } else if (info.updateType == "example_url") {
        const indexKey = state.initData.script_scenes[
          info.parentIndex
        ].example_url?.findIndex((extendsItem) => extendsItem.id == info.id);
        console.log(indexKey);
        state.initData.script_scenes[info.parentIndex].example_url.splice(
          indexKey,
          1
        );
      }
    };
    // 气泡子组件新增图片回调
    const updateParentsUrl = (info) => {
      if (info.updateType == "remark_example_url") {
        info.filterList.forEach((item) => {
          const index = state.initData.script_scenes[
            info.parentIndex
          ].remark_example_url?.findIndex(
            (existingItem) => existingItem.id == item.id
          );
          if (index == -1) {
            state.initData.script_scenes[
              info.parentIndex
            ].remark_example_url.push({
              ...item,
            });
          }
        });
      } else if (info.updateType == "example_url") {
        info.filterList.forEach((item) => {
          const index = state.initData.script_scenes[
            info.parentIndex
          ].example_url?.findIndex(
            (existingItem) => existingItem.id == item.id
          );
          if (index == -1) {
            state.initData.script_scenes[info.parentIndex].example_url.push({
              ...item,
            });
          }
        });
      }
    };

    const audioRef = ref(null); // 音频播放实例
    let startTime = 0; // 记录上一个音频的开始时间
    // 判断当前是否在播放
    const isItemPlaying = (item) => {
      return item === state.currentlyPlayingItem;
    };

    const playAudio = (item) => {
      if (state.currentlyPlayingItem) {
        if (item.id === state.currentlyPlayingItem.id) {
          // 如果点击的是正在播放的音频，则暂停播放
          const audioElement = document.getElementById(item.id);
          if (audioElement) {
            if (audioElement.paused) {
              audioElement.play();
            } else {
              audioElement.pause();
            }
          }
          return;
        } else {
          // 切换播放，停止上一个音频
          const previousAudioElement = document.getElementById(
            state.currentlyPlayingItem.id
          );
          if (previousAudioElement) {
            previousAudioElement.pause();
            previousAudioElement.currentTime = 0; // 将播放时间重置为开始时间
          }
        }
      }

      const audioElement = document.getElementById(item.id);
      if (audioElement) {
        audioElement.currentTime = startTime;
        audioElement.play();
        state.currentlyPlayingItem = item;
        startTime = 0; // 重置开始时间
      }
    };

    const pauseAudio = (item) => {
      if (item.id === state.currentlyPlayingItem.id) {
        const audioElement = document.getElementById(item.id);
        if (audioElement) {
          audioElement.pause();
          startTime = audioElement.currentTime; // 记录当前播放时间作为开始时间
        }
        state.currentlyPlayingItem = null;
      }
    };
    const endAUdioPlay = (item) => {
      const audioElement = document.getElementById(item.id);
      audioElement.currentTime = 0;
      audioElement.pause();
      state.currentlyPlayingItem = null;
    };
    // 关闭弹窗
    const handleCancel = () => {
      if (state.currentlyPlayingItem) {
        const audioElement = document.getElementById(
          state.currentlyPlayingItem.id
        );
        if (audioElement) {
          audioElement.currentTime = 0; // Reset the playback time to 0
          audioElement.pause(); // Pause the audio
        }
        state.currentlyPlayingItem = null;
      }
      state.visible = false;
    };
    // 导入混剪
    const imprrtMixCut = () => {
      if (state.currentlyPlayingItem) {
        const audioElement = document.getElementById(
          state.currentlyPlayingItem.id
        );
        if (audioElement) {
          audioElement.currentTime = 0; // Reset the playback time to 0
          audioElement.pause(); // Pause the audio
        }
        state.currentlyPlayingItem = null;
      }
      if (state.createType == "scriptMixedCreate") {
        if (state.viewType == "myScript") {
          router.push({
            path: "/mixedCutCreat",
            query: { mixcutId: state.detailId, type: 0, viewType: 2 },
          });
        } else if (state.viewType == "templateScript") {
          // 脚本广场导入
          router.push({
            path: "/mixedCutCreat",
            query: {
              mixcutId: state.detailId,
              type: 0,
              viewType: 2,
              scriptType: "template",
            },
          });
        }
        // router.push({
        //   path: "/mixedCutCreat",
        //   query: { mixcutId: state.detailId, type: 0, viewType: 2 },
        // });
      } else if (state.createType == "mixedCutCreat") {
        console.log("点击了查看");
        Modal.confirm({
          title: () => `替换`,
          content:
            "导入脚本模板时，脚本文案将会覆盖原有混剪工程(素材+文案+设置) ，是否要导入",
          okText: "确认",
          cancelText: "取消",
          icon: () => createVNode(ExclamationCircleOutlined),
          centered: true,
          onOk() {
            context.emit("viewImportScript", state.initData);
            // 确定删除吗
            state.visible = false;
          },
          onCancel: () => {
            console.log("Cancel");
          },
        });
      }
    };

    return {
      ...toRefs(state),
      getScriptLineDetail,
      importImg,
      closeChooseMaterial,
      deleteParentUrl,
      initializeData,
      audioRef,
      updateParentsUrl,
      showModal,
      handleCancel,
      imprrtMixCut,
      isItemPlaying,
      playAudio,
      pauseAudio,
      startTime,
      endAUdioPlay,
    };
  },
});
</script>

<style lang="less" scoped>
.propover {
  z-index: 9999;
}
.container {
  width: 100%;
  // overflow: hidden;
  .content-page {
    padding-top: 40px;
    // 头部输入框
    .top-ipt {
      height: 60px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      .ipt {
        border: none;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 5px; /* 添加内边距 */
        .ant-input {
          font-size: 20px; /* 自定义的字体大小 */
        }
      }
    }
    // 列表------
    // 台词文案头部样式
    .th_line_audio {
      display: flex;
      height: 100%;
      padding: 0 20px;
      justify-content: space-between;
    }
    // 台词文案头部样式

    // 分镜名称
    .td_storyboard_name {
      display: flex;
      width: 100%;
      flex-direction: column;
      height: 180px;
      .font-count {
        text-align: right;
        color: #c5c5d4;
      }
    }
    // 分镜描述
    .td_storyboard_desc {
      display: flex;
      height: 180px;
      .td_storyboard_descLf {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 30px;
        .font-count {
          text-align: right;
          color: #c5c5d4;
        }
      }
    }
    // 台词文案
    .td_line_audio {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 180px;
      justify-content: space-between;
      .line_dubbing-textarea {
        flex: 1;
      }
      // 无音频 播放地址
      .line_dubbing {
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        .line_dubbing_btn {
          border: 1px solid #eaedf1;
          display: flex;
          align-items: center;
          padding: 2px 5px;
          cursor: not-allowed;
        }
      }
      // 有音频播放地址
      .hasurl_line_dubbing {
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        .line_dubbing_btn {
          border: 1px solid #eaedf1;
          display: flex;
          align-items: center;
          padding: 2px 5px;
          cursor: pointer;
        }
      }
    }
    // 禁用输入框拖拽功能
    .no-resize {
      resize: none;
    }
    // 图片
    .file-upload-img {
      // 新增图片--无图片情况
      cursor: pointer;
      display: flex;
      justify-content: center;
      .upload-img {
        background: #f6f8fa;
        height: 160px;
        width: 125px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #c7ccd6;
        border: 1px dotted #dde2e9;
        cursor: not-allowed;
        &:hover {
          background: #f1f3f5;
        }
      }
      // 列表展示--有图片情况
      .file-img {
        height: 180px;
        width: 140px;
        background: black;
        position: relative;
        // 图片数量
        .img-count {
          position: absolute;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 3px;
          background: #201f20;
          color: #fff;
          right: 0;
          bottom: 0;
        }
      }
    }
    // 列表------
    .addLine {
      widows: 100%;
      display: flex;
      justify-content: center;
      font-weight: 500;
      cursor: not-allowed;
      span {
        width: 130px;
        height: 35px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #f2f4f6;
        background: #fafbfc;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        position: relative;
      }
    }
  }

  .btn {
    display: flex;
    align-items: center;
    // background: skyblue;
  }
}
:deep(.ss-table-wrapper) {
  max-height: 500px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    background: #fafafa;
  }

  &::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}
.textarea {
  &::-webkit-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}
:deep(.ss-modal-footer) {
  background: pink !important;
}
// :deep(.ss-modal-content) {
//   border-radius: 10px !important;
// }
</style>
